<template>
  <div>
    <!-- 添加或修改资产清单表对话框 -->
    <el-dialog v-model="openFlag" :title="title" width="900" append-to-body>

      <vxe-table style="height: 100%;flex-grow: 1;"
                 border="full"
                 ref="tableRef" :tree-config="{transform: true, rowField: 'menuId', parentField: 'parentId'}"
                 :column-config="{resizable: true}"
                 :checkbox-config="{checkField: 'checked'}"
                 :data="list">
        <vxe-column field="menuName" title="名称" tree-node></vxe-column>
        <vxe-column field="orderNum" width="80" title="显示顺序"></vxe-column>
        <vxe-column field="path" title="路由地址"></vxe-column>
        <vxe-column type="checkbox" title="" field="checked" width="280"></vxe-column>

      </vxe-table>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="close">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script setup>

import api from "./api.js";
import menuApi from "@/api/menu.js"

const { proxy } = getCurrentInstance();

const emit = defineEmits(['sub'])

const tableRef = ref();

const openFlag = ref(false);
const isEdit = ref(false);
const title = computed(() => {
  if (isEdit.value) {
    return '编辑'
  } else {
    return '新增'
  }
})

const form = ref();

const formData = reactive({
  id: null,
  name: null,
  code: null,
  leader: null,
  address: null
});

const list = ref([]);
let roleId = null;

function getList() {
  api.listMenu(roleId).then(response => {
    list.value = response;
  }).catch(error => {
    console.log(error);
  });
}

function updateRoleMenu(roleId) {
  api.updateRoleMenu(roleId, menuIdList).then(() => {
    getList();
  })
}

function open(row) {
  openFlag.value = true;
  roleId = row.roleId;
  getList();
}

function close() {
  openFlag.value = false;
}

function submitForm() {
  const checkedList = tableRef.value.getCheckboxRecords();
  const menuIdList = checkedList.map( (item)=> {
    return item.menuId;
  });
  api.updateMenu(roleId, menuIdList).then(response => {
    emit('sub');
    close();
  })
}

defineExpose({
  open
})




</script>

